<template>
  <view :data-theme="globPrimary">
    <view class="check"
      ><u-checkbox v-model="isChecked" :activeColor="globPrimaryColor" @change="change"
        >只看我的</u-checkbox
      ></view
    >
    <view class="note-wrapper">
      <view class="item" v-for="(res, index) in noteList" :key="index">
        <view class="heart-photo">
          <u-image width="64rpx" height="64rpx" :src="res.user.avatar_url" shape="circle"
            ><u-icon slot="error" size="28" name="account-fill"></u-icon
          ></u-image>
        </view>
        <view class="right">
          <view class="user-info">
            <view class="name">{{ res.user.nick_name }}</view>
            <u-icon
              v-if="userInfo.id == res.user_id"
              name="home_edit_icon"
              custom-prefix="edu-icon"
              size="25"
              color="#909399"
              @click="modifyNote(res)"
            ></u-icon>
          </view>

          <view class="content">
            {{ delHtmlTag(res.content) }}
            <text class="more" @click="seeMore(res)" v-if="res.content.length > textLength"
              >查看更多</text
            >
          </view>
          <view class="date">{{ res.create_time | timeFrom('yyyy-mm-dd') }}</view>
        </view>
      </view>
      <edu-empty v-if="$u.test.empty(noteList)"></edu-empty>
    </view>

    <!-- 笔记输入框 -->
    <noteTextarea ref="noteListTextarea" :detailsInfo="detailsInfo"></noteTextarea>
    <!-- 笔记更多详情 -->

    <u-popup v-model="noteDetailShow" mode="right">
      <u-navbar title="笔记详情" :custom-back="back"></u-navbar>
      <detailPage ref="detailPage" :note="noteDetailItem"></detailPage>
    </u-popup>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import noteTextarea from '../video/components/note-textarea.vue'
import detailPage from './details.vue'
export default {
  components: {
    noteTextarea,
    detailPage,
  },
  props: {
    detailsInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      noteList: [],
      isChecked: false,
      mescroll: null,
      textLength: 78,
      noteDetailItem: {},
      noteDetailShow: false,
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem,
    }),
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
  },
  methods: {
    // 列表
    getNoteList(page, mescroll) {
      let params = {
        section_id: this.getCurrentPlayItem.id,
        type: this.isChecked ? 'my' : 'all',
        page: page.num,
        count: page.size,
      }
      this.$edu.api.getCourseNoteList(params).then((res) => {
        const { data } = res
        if (page.num == 1) this.noteList = []
        this.noteList = this.noteList.concat(data.data)
        mescroll.endSuccess(data.data.length)
        this.mescroll = mescroll
      })
    },
    // 查看更多
    seeMore(item) {
      this.noteDetailShow = true
      this.noteDetailItem = item
    },
    // 修改笔记
    modifyNote(item) {
      this.$refs.noteListTextarea.show = true
      this.$refs.noteListTextarea.modifyId = item.id
      this.$refs.noteListTextarea.content = item.content
      this.$refs.noteListTextarea.status = item.open_status ? true : false
    },
    change(detail) {
      this.isChecked = detail.value
      this.mescroll.resetUpScroll()
    },
    // 去除富文本的标签
    delHtmlTag(html = '') {
      if (html.length > this.textLength) {
        return html.substring(0, this.textLength) + '...'
      } else {
        return html
      }
    },
    back() {
      this.noteDetailShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
.check {
  padding: 0 30rpx;
  margin-top: 40rpx;
}
.note-wrapper {
  .item {
    display: flex;
    padding: 30rpx;
    .right {
      flex: 1;
      margin-left: 20rpx;
      margin-right: -30rpx;
      padding-right: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f7f7f7;
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        .name {
          flex: 1;
          margin-right: 20rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #606266;
        }
      }
      .content {
        font-size: 28rpx;
        font-weight: 400;
        color: #303133;
        line-height: 46rpx;
        position: relative;
        word-wrap: break-word;
        word-break: break-all;
        .more {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .more {
        margin-top: 10rpx;
        font-size: 28rpx;
        font-weight: 400;
        @include text-color();
      }
      .date {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #909399;
      }
    }
  }
}
</style>
